<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>当前的n值{{n}}</p>
    <button @click="n++">+1</button>
    <button @click="$destroy()">销毁vm</button>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data: {n: 1},
        beforeCreate() {
            console.log(" beforeCreate")
        },
        created() {
            console.log("created")
        },
        beforeMount(){
            console.log("beforeMount")
        },
        mounted(){
            console.log("mounted")
        },
        beforeUpdate(){
            console.log("beforeUpdate")
        },
        updated(){
            console.log("updated")
        },
        /*
        * beforeDestroy
            类型：Function
            详细：
            实例销毁之前调用。在这一步，实例仍然完全可用。
        * */
        beforeDestroy() {
            console.log("beforeDestroy")
        },

        /*
        * destroyed
            类型：Function
            详细：
            实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
        * */
        destroyed(){
            console.log("destroyed")
        }
    })
</script>
</body>
</html>
